import { reactive, toRefs, onMounted, onBeforeUnmount, defineComponent, getCurrentInstance, ref, provide } from 'vue';
import { useToggle } from '@vueuse/shared';
import { useDark } from '@vueuse/core';
import { useUsersStore } from '@/store/user';
import useLocation from '@/hooks/useLocation';
import toolPanel from '@/views/toolPanel/index.vue';

export default defineComponent({
    name:'home',
    components: {
        toolPanel
    },
    props:{},
    emits:[],
    setup (props, context)
    {
        const { proxy }:any = getCurrentInstance();
        const userStore = useUsersStore();
        const useLocationHooks = useLocation();
        let data = reactive({
        });

        const isDark = useDark({
            // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
            storageKey: 'useThemeKey',
            // 暗黑class名字
            valueDark: 'dark'
        });

        const isLight = useDark({
            // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
            storageKey: 'useThemeKey',
            // 高亮class名字
            valueLight: 'light'
        });

        const toggle = () => 
        {
            let useThemeKey = window.localStorage.getItem('useThemeKey');
            if (useThemeKey)
            {
                if (useThemeKey === 'light' || useThemeKey === 'auto')
                {
                    useToggle(isLight);
                    userStore.themeValue = false;
                }
                else
                {
                    useToggle(isDark);
                    userStore.themeValue = true;
                }
            }
            else
            {
                useToggle(isLight);
                userStore.themeValue = false;
            }
        };


        let methods = {
        };
        
        onMounted(() => 
        {
            toggle();
            // 初始化地理位置
            // useLocationHooks.initLocation();
        });

        return {
            ...toRefs(data),
            ...methods,
            userStore
        };
    }
});